<template>
  <div class="fr w950">
    <!--  我的订单 -->
    <div class="comm_bd mb10 clearfix center_box">
      <div class="center_tt">
        我的订单
        <span class="line"><s class="l_4"></s></span>
      </div>
      <div class="comm_bd clearfix mb20 choose_box">
        <div class="mr20 choose_game fl">
          <p class="fl">选择游戏角色：</p>
          <ul>
            <li>
              <select name="" id="" v-model="addressId" @change="ProvinceOrder(addressId)">
                <option value="-1">请输入地区</option>
                <option :value="item.id" v-for="item in b" :key="item.id">
                  {{ item.province }}
                </option>
              </select>
            </li>
          </ul>
        </div>
      </div>
      <div class="comm_bd">
        <div class="clearfix center_tab">
          <a href="#">历史订单</a>
        </div>
        <div class="comm_bd center_tbl fixed_tbl">
          <table width="100%">
            <thead>
              <tr>
                <th width="150">游戏</th>
                <th width="260">订单物品</th>
                <th width="100">数量</th>
                <th width="160">实付款</th>
                <th width="150">
                  <div class="box" id="selectStatus">
                    <div class="tt">
                      <s class="i_sp"></s>
                      <span id="curStatus" class="curBizName"
                        >全部订单状态</span
                      >
                    </div>
                    <div class="choose_ul" id="statusList">
                      <ul>
                        <li status=""><a>全部订单状态</a></li>
                        <li status="1"><a>等待买家付款</a></li>
                        <li status="2"><a>买家已付款</a></li>
                        <li status="3"><a>交易成功</a></li>
                        <li status="-100"><a>交易已撤销</a></li>
                      </ul>
                    </div>
                  </div>
                </th>
                <th width="120">操作</th>
              </tr>
            </thead>
            <tbody id="old_order_list" style="display: table-row-group">
              <tr v-for="item in a" :key="item.id">
                <td>{{item.game}}</td>
                <td>{{item.goods}}</td>
                <td>{{item.count}}</td>
                <td>{{(item.jg * item.count).toFixed(2)}}QB<br />道聚城官网</td>
                <td>
                  <span class="orange" style="color: #f50">{{item.state}}</span>
                  <br />
                  <a class="blue" href="#" style="color: #1994eb">[订单详情]</a>
                </td>
                <td>
                  <a
                    href="#"
                    target="_blank"
                    class="comm_btn mid_btn"
                    style="
                      display: inline-block;
                      width: 90px;
                      height: 25px;
                      line-height: 25px;
                      background: #f74a4a;
                      color: #fff;
                    "
                    >我要付款</a
                  >
                  <br />
                  <a
                    class="red cancel_btn"
                    eventid="DJC-CF-0623085516-bkm5Qx-855-047997"
                    biz="cf"
                    seria="CF-20220623085516541-231003872"
                    style="color: #f74a4a;"
                    href="#"
                    @click="Cancel(item.id)"
                    >[取消订单]</a
                  >
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div id="bottom_order">
          <div class="page" id="old_page_wrapper" style="display: block"></div>
        </div>
        <p class="center_tip">
          <b class="red">温馨提示：</b
          ><br />1、购买成功后系统会自动发货，如发货失败24小时内会自动补发！<br />2、如果网银重复付款或付款后订单取消，道具未到账，网银退款将在15个工作日内到账。
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { queryOrder, queryProvinceOrder, queryProvince, queryCancel } from '@/api/goods'
export default {
  name: 'Rwu3',
  data () {
    return {
      a: [],
      b: [],
      addressId: '-1'
    }
  },
  mounted () {
    this.Order()
    this.Province()
  },
  methods: {
    async Province () {
      const res = await queryProvince()
      this.b = res
    },
    async Order () {
      const res = await queryOrder()
      this.a = res
    },
    async ProvinceOrder (id) {
      const res = await queryProvinceOrder(id)
      this.a = res
      if (this.addressId === '-1') {
        this.Order()
      }
    },
    async Cancel (id) {
      await queryCancel(id)
      this.Order()
    }
  }
}
</script>

<style lang="scss" scoped>
.w950 {
  width: 950px;
  .center_tip {
    padding: 13px 0 0 5px;
    border-top: 1px solid #e6e9ef;
    margin-top: 20px;
    .red,
    a.red {
      color: #f74a4a;
    }
  }
  .favorite {
    overflow: hidden;
  }
  .fixed_tbl {
    table-layout: fixed;
    th {
      font-weight: 400;
      font-size: 14px;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
      thead {
        border-bottom: 1px solid #e5e5e5;
      }
    }
  }
  .center_tbl {
    padding: 10px 20px;
    th,
    td {
      padding: 11px 0;
      line-height: 18px;
      text-align: center;
    }
    .i_sp {
      background: url(//js02.daoju.qq.com/common/images/icon.png) no-repeat;
    }
    .choose_ul {
      display: none;
      position: absolute;
      z-index: 1;
      top: 30px;
      left: 12px;
      border: 1px solid #e5e5e5;
      border-bottom: 0;
      width: 150px;
      background: #fff;
      overflow: hidden;
      li {
        cursor: pointer;
        line-height: 30px;
        height: 30px;
        border-bottom: 1px solid #e5e5e5;
      }
    }
    .box:hover .choose_ul {
      display: block;
    }
    .box {
      padding: 5px 15px;
      line-height: 20px;
      height: 20px;
      width: 150px;
      margin-right: 15px;
      position: relative;
      z-index: 20;
      s {
        float: right;
        width: 18px;
        height: 7px;
        background-position: 0 -24px;
        margin-top: 7px;
        overflow: hidden;
      }
      .tt {
        cursor: pointer;
        width: 110px;
        margin: 0 auto;
      }
    }
  }
  .fl {
    float: left;
  }
  .center_box {
    padding: 15px 20px 20px 20px;
    .page {
      padding-top: 20px;
      text-align: center;
      height: 38px;
    }
    .choose_box {
      padding: 10px 20px;
      line-height: 30px;
    }
    .comm_bd {
      border: 1px solid #e6e9ef;
      background: #fff;
      .center_tab {
        border-bottom: 1px solid #e6e9ef;
        height: 44px;
        a {
          float: left;
          width: 130px;
          height: 44px;
          font-size: 14px;
          line-height: 44px;
          text-align: center;
          border-right: 1px solid #e6e9ef;
        }
      }
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mr20 {
      margin-right: 20px;
      ul {
        margin-left: 95px;
        line-height: 30px;
        li {
          float: left;
          min-width: 160px;
          select {
            margin-right: 10px;
            height: 30px;
            line-height: 30px;
            padding: 4px 6px;
            width: 175px;
            border: 1px solid #ccc;
            vertical-align: middle;
            outline: none;
          }
        }
      }
      .box {
        border: 1px solid #e5e5e5;
        padding: 5px 15px;
        line-height: 20px;
        height: 20px;
        width: 120px;
        margin-right: 15px;
        position: relative;
        z-index: 20;
        .i_sp {
          background: url(//js02.daoju.qq.com/common/images/icon.png) no-repeat;
        }
        s {
          float: right;
          width: 10px;
          height: 7px;
          margin-top: 7px;
          overflow: hidden;
        }
      }
    }
  }
  .comm_bd {
    border: 1px solid #e6e9ef;
    background: #fff;
  }
  .mb10 {
    margin-bottom: 10px;
  }
  .center_tt {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 20px;
    position: relative;
    .line {
      display: block;
      background: #e6e9ef;
      height: 1px;
      overflow: hidden;
      margin-top: 5px;
      s {
        width: 58px;
        display: block;
        background: #f74a4a;
        height: 1px;
        overflow: hidden;
      }
    }
  }
}
.fr {
  float: right;
}
</style>
